<script setup>
import { reactive, ref } from "vue";

  const choose_nav = (event) => {
    let item_doc_list = document.querySelectorAll('.tools-common-choose-list-item');
    item_doc_list.forEach(item_doc => {
      item_doc.style.removeProperty('color');
      let child = item_doc.children;
      child[1].style.removeProperty('height');
    })
    event.currentTarget.style.color = 'black';
    event.currentTarget.children[1].style.height = '5px';
  }

  let excel_write_data_list = reactive([]);
  let excel_read_data_list = reactive([]);
</script>

<template>
  <div class="tool-common-choose-nav-basic">
    <div class="tools-common-choose-list-basic">
      <div class="tools-common-choose-list-item" @click="choose_nav($event)">
        <div class="tools-common-choose-list-item-title">文本转Excel</div>
        <div class="tools-common-choose-list-item-strip"></div>
      </div>
      <div class="tools-common-choose-list-item" @click="choose_nav($event)">
        <div class="tools-common-choose-list-item-title">Excel转文本</div>
        <div class="tools-common-choose-list-item-strip"></div>
      </div>
    </div>
  </div>
  <div class="tool-excel-basic">
    <div class="tool-excel"></div>
  </div>
</template>

<style scoped>
  .tool-common-choose-nav-basic {
    width: 100vw;
    height: 76px;
    box-shadow: 0 0 15px 5px rgba(58, 58, 58, .1);
    position: relative;
    z-index: 2;
  }
  .tools-common-choose-list-basic {
    width: max-content;
    height: 100%;
    margin-left: 120px;
    overflow: hidden;
  }
  .tools-common-choose-list-item {
    width: max-content;
    height: 100%;
    position: relative;
    color: rgb(58, 58, 58);
    font-size: 16px;
    float: left;
    transition: color .3s;
  }
  .tools-common-choose-list-item-title {
    width: max-content;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
  }
  .tools-common-choose-list-item-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    background-color: #59c3ef;
    transition: height .2s;
  }
  .tools-common-choose-list-item:hover {
    cursor: pointer;
    color: black;
  }
  .tools-common-choose-list-item:hover .tools-common-choose-list-item-strip {
    height: 5px;
  }


  /* ========================================== */
  .tool-excel-basic {
    width: 100vw;
    height: calc(100vh - 76px);
    background-color: rgb(248, 248, 248);
  }
  .tool-excel {
    width: 86%;
    height: 100%;
    background-color: #67c23a;
    margin: 0 auto;
  }
</style>